<template>
优惠标题<input type="text" v-model="Title">
<input type="button" value="查询" @click="LoadData">

<table border="1">
    <thead>
        <tr>
            <td>折扣券标题</td>
            <td>折扣券颜色</td>
            <td>剩余库存量</td>
            <td>每人限领</td>
            <td>使用条件</td>
            <td>折扣</td>
            <td>开始日期</td>
            <td>截止日期</td>
            <td>适用业务</td>
            <td>使用须知</td>
            <td>客服电话</td>
            <td>优惠券图片</td>
            <td>门店</td>
            <td>操作列</td>
        </tr>
    </thead>
    <tbody>
        <tr v-for="item in info">
            <td>{{item.Discount_Title}}</td>
            <td>{{item.Discount_Color}}</td>
            <td>{{item.Discount_Num}}</td>
            <td>{{item.Discount_Limited}}</td>
            <td>{{item.Discount_Use}}</td>
            <td>{{item.Discount_Discount}}</td>
            <td>{{item.Discount_StartTime.substring(0,10)}}</td>
            <td>{{item.Discount_EndTime.substring(0,10)}}</td>
            <td>{{item.Discount_Business}}</td>
            <td>{{item.Discount_Precautions}}</td>
            <td>{{item.Discount_Phone}}</td>
            <td><img style="width: 60px;height: 70px;" :src="item.Imgs"></td>
            <td>{{item.ShopId}}</td>
            <td>操作列</td>
        </tr>
    </tbody>
</table>
当前共{{ pageInfo.totalCount }}条,当前页{{ pageInfo.pageSize }}条
当前页共{{ pageInfo.pageIndex }}/{{pageInfo.pageCount  }}页

<span>
    <a href="#" @click="PageChange('F')" style="margin-right: 20px;">首页</a>
    <a href="#" @click="PageChange('U')" style="margin-right: 20px;">上一页</a>
    <a href="#" @click="PageChange('N')" style="margin-right: 20px;">下一页</a>
    <a href="#" @click="PageChange('E')" style="margin-right: 20px;">尾页</a>
</span>
</template>
<script setup lang="ts">

import { onMounted,ref } from 'vue';
import axios from 'axios';

const Title=ref("");


onMounted(()=>{
    LoadData();
})
//数据加载
const LoadData=()=>{

axios.get('https://localhost:7153/api/Discount/ShowDiscount',

{
    params:{
        Title:Title.value,
       
        pageIndex:pageInfo.value.pageIndex,
        pageSize:pageInfo.value.pageSize

    }
}

)

.then(res=>{

    info.value=res.data.Data_Info;
    pageInfo.value.totalCount=res.data.TotalCount
    pageInfo.value.pageCount=res.data.PageCount


})



}

//分页
const pageInfo=ref({

pageIndex:1,
pageSize:2,
totalCount:0,
pageCount:0


})


const info=ref([{
    Discount_Title:"",
    Discount_Color:"",
    Discount_Num:"",
    Discount_Limited:"",
    Discount_Use:"",
    Discount_Discount:"",
    Discount_StartTime:"",
    Discount_EndTime:"",
    Discount_Business:"",
    Discount_Precautions:"",
    Discount_Phone:"",
    Imgs:"",
    ShopId:0

}])



//分页
const PageChange=(choose:string)=>{

switch(choose){

    case 'F':
        pageInfo.value.pageIndex=1;
        break;
        case 'U':
            pageInfo.value.pageIndex=pageInfo.value.pageIndex-1;
            break;
            case 'N':
                pageInfo.value.pageIndex=pageInfo.value.pageIndex+1;
                break;
                case 'E':
                    pageInfo.value.pageIndex=pageInfo.value.pageCount;
                    break;




}
LoadData();



}


</script>